custom css

custom css 是在分享許多svelte 過場動畫後要介紹的主題，為什麼要分享這部分呢，因為 html 要畫面多樣性就跑不掉 css 的控制，然而 svelte 有過場動畫這個函式庫幫忙透過控制 css 來達到過場動畫的呈現簡直易如反掌，接下來就看看今日的內容吧。

本文同步放置於此

過場動畫與 custom css

在昨天之前的分享過場動畫都是直接使用 svelte 內建的函示庫來完成的，如果今天想要客製化動態的結果是否可行呢，當然這是許多開發人員的心聲，而 svelte 也包含這樣的彈性，所以接下來分享一下如何在過場動畫中透過 custom css 來完成這個需求。

如何實作 custom css 在過場動畫中

一如往昔的，千言萬語不如一段程式碼來看，請大家先看看下列的程式碼。

<script>
	import { elasticOut } from 'svelte/easing';
	let visible = true;

	function spin(node, { duration }) {
		return {
			duration,
			css: t => {
				const eased = elasticOut(t);

				return `
					transform: scale(${eased}) rotate(${eased * 1080}deg);
					color: hsl(
						${~~(t * 360)},
						${Math.min(100, 1000 - 1000 * t)}%,
						${Math.min(50, 500 - 500 * t)}%
					);`
			}
		};
	}
</script>

<style>
	.centered {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
	}

	span {
		position: absolute;
		transform: translate(-50%,-50%);
		font-size: 4em;
	}
</style>

<label>
	<input type="checkbox" bind:checked={visible}>
	visible
</label>

{#if visible}
	<div class="centered" in:spin="{{duration: 8000}}">
		<span>transitions!</span>
	</div>
{/if}

接下來說明一下，這裡的spin這方法是我們定義的過場動畫的函式，透過in:spin可以在visible為true時進入spin這方法，接著我們可以在spin內最後的return內容中的css屬性來克制化的css呈現出我們想要的效果。這於這是甚麼效果，大家可以把程式碼貼到svelte REPL上瞧瞧了。

小結

今天藉由過場動畫的範例介紹給大家如何透過過場動畫的機制來客製化css效果，但是有些過場動畫用客製化css是無法完成的，明天再跟大家介紹一下如何用客製化的javascript來處理過場動畫。